import React, { Component } from 'react';
import { Box, Tabs, TabList, Tab, TabPanels, TabPanel, Center, Flex, Text } from '@chakra-ui/react';
import SignIn from './SignIn';
import SignUp from './SignUp';

export class FormCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tabIndex: 0
    }
  }
	render() {
		return (
			<Box color="white" w="100%">
				<Flex justifyContent="center" alignItems="center" h="100vh">
					<Flex direction="column" borderRadius={5} w="400px" h="550px" shadow="base" color="gray.500">
						<Tabs isFitted onChange={(index) => this.setState({ tabIndex: index})} >
							<TabList color="gray" mx="100px" my="30px">
								<Tab _selected={{ color: 'tomato'}}>登录</Tab>
								<Tab _selected={{ color: 'tomato'}} ml="20px">注册</Tab>
							</TabList>
							<TabPanels>
								<TabPanel>
									<SignIn />
								</TabPanel>
								<TabPanel>
                  <SignUp />
								</TabPanel>
							</TabPanels>
						</Tabs>
					</Flex>
				</Flex>
			</Box>
		);
	}
}

export default FormCard;
